<template>
  <div class="Chart">
    <!-- <div :id="id" :style="{width: '100%', height: '100%'}"></div> -->
    <div :id="id" :style="{width: '100%', height: '100%'}"></div>
  </div>
</template>

<script>
// 引入基本模板
let echarts = require("echarts/lib/echarts");
// 引入柱状图组件
require("echarts/lib/chart/bar");
// // 引入提示框和title组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");

export default {
  name: "Home",
  props: {
    id: {
      type: String,
      default: () => {
        return "myChart";
      }
    },
    ec_type: {
        type: String,
        default: () => {
          return "bar";
        }
    },
    Xdata: {
      type: Array,
      default: () => {
        return ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"];
      }
    },
    Ydata: {
      type: Array,
      default: () => {
        return [2, 1, 5, 6, 8, 1];
      }
    }
  },
  methods: {
    drawLines() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById(this.id));
      let series = [];
      var reg = new RegExp("^[0-9]*$")
      if (this.ec_type === "line") {
        if(!reg.test(this.Ydata[0])){
          series = []
          for (let i = 0; i<this.Ydata.length; i++) {
            series.push(
              {
                name: this.Ydata[i].name,
                type: "line",
                data: this.Ydata[i].value,
                smooth: true,
              }
            )
          }
        } else {
          series = [
            {
              name: "单",
              type: "line",
              data: this.Ydata,
              smooth: true,
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#007DFF" },
                  { offset: 1, color: "rgba(255, 255, 255, 0.3" }
                ])
              }
            }
          ];
        }
      } else {
        series = [
          {
            name: "次",
            type: "bar",
            data: this.Ydata,
            barWidth: 30,
            itemStyle: { 
              normal: {
                barBorderRadius: 2,
                color: '#5470c6'
              }
            }
          }
        ];
      }
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: "axis",
          backgroundColor: "#fff",
        },
        grid: {
          top: '10',
          left: '10',
          right: '35',
          bottom: '1%',
          containLabel: true
        },
        xAxis: {
          type: "category",
          boundaryGap: (this.ec_type == "line" ? false : true),
          data: this.Xdata
        },
        yAxis: {
          name: '数量',
          type: "value"
        },
        series: series
      });
    }
  }
};
</script>
